<template>
  <div id="specialtyLibrary-list" class="specialtyLibrary-list">
    <el-row :gutter="20">
      <el-col :span="12" v-for="v in tableData" :key="v.id">
        <div class="list--wrap-item clearfix">
          <el-card class="box-card">
            <div class="wrap">
              <div class="fl l-img img-hover" @click="toCourseDetail(v)">
                <img :src="coverImg(v)" />
              </div>
              <div class="fl r-txt">
                <p class="title one-ellipsis" @click="toCourseDetail(v)">
                  {{ v.title }}
                </p>
                <div class="txt-info">
                  <p class="txt-row sheng">
                    <span class="row-name">单位：</span>
                    <span class="row-cont col">{{ deptName(v) }}</span>
                  </p>
                  <p class="txt-row sheng">
                    <span class="row-name">建设团队：</span>
                    <span class="row-cont col">{{ teamInfo(v) }}</span>
                  </p>
                </div>
                <div class="txt-score">
                  <!-- <Score :resId="v.id" :resType="1" /> -->
                  <FileCountPro :data="v.sysKnowledgeFilesVO" />
                  <div class="clearfix txt-ico">
                    <LookDown :count="v.evaluateVO" size="5" />
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  components: {
    LookDown: () => import('@/components/home/lookDown.vue'),
    Score: () => import('@/components/home/score.vue'),
    FileCountPro: () => import('@/components/home/fileCountPro.vue'),
  },
  data() {
    return {}
  },
  props: ['tableData'],
  mounted() {},
  methods: {
    toCourseDetail(row) {
      let { level } = this.$store.getters
      if (level == undefined || level >= 3) {
        this.warnMsg('抱歉，您没有浏览权限')
        return
      }
      this.$store.commit('SETCURCOURSE', row)
      this.$router.push({
        name: 'specialty-detail',
        query: { courseId: row.id },
      })
    },
  },
}
</script>
<style  lang="scss" >
#specialtyLibrary-list {
  width: 100%;

  .list--wrap-item {
    padding-bottom: 30px;
    .wrap {
      position: relative;
    }
    .l-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 220px;
      border-right: 1px solid #eee;
    }
    .r-txt {
      background: #fff;
      width: 100%;
      height: 220px;
      padding: 0 30px;
      padding-left: 320px;
      box-sizing: border-box;
      .title {
        border-bottom: 1px solid #d8d5d5;
        line-height: 60px;
        color: #ac100f;
        font-size: 22px;
        font-weight: 900;
        cursor: pointer;
      }
      .col {
        color: #666;
      }
      .txt-info {
        margin-top: 15px;
        .txt-row {
          position: relative;
          width: 100%;
          line-height: 34px;
          font-size: 16px;
          padding-left: 1em;
          box-sizing: border-box;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 13px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--colorH1);
          }
          .row-cont {
            width: 60%;
          }
          .row-name {
            color: #000;
            font-weight: bold;
          }

          .three-ellipsis {
            height: 114px;
            line-height: 38px;
          }
        }
      }
    }
  }
}
.txt-score {
  margin-top: 5px;
}
</style>
<style scoped>
.specialtyLibrary-list >>> .el-card__body {
  padding: 0;
}
</style>